import { Row, Col, Input, Form, DialogPlugin, message } from 'tdesign-react'

import { RiDeleteBack2Line } from 'react-icons/ri'

import styles from './index.module.less'

const MailTopTypeFormItem = (props: any) => {

  const {
    formFieldName,
    // addFormItem,
    removeFormItem,
    // value,
    // restFields
  } = props

  const openRemoveFormItemDialog = () => {
    console.log(props)
    // TODO: 打开删除确认弹窗
    const sendMailDialog = DialogPlugin({
      header: '你确定要删除这个顶级类型吗？',
      body: null,
      theme: 'warning',
      style: {
        width: '400px',
      },
      onConfirm: () => {
        removeFormItem(formFieldName)
        message.success('删除成功')
        sendMailDialog.hide()
      },
      onClose: () => {
        sendMailDialog.hide()
      },
      onCloseBtnClick: ({ e }) => {
        console.log(e)
        sendMailDialog.hide()
      },
    })
  }

  return <div className={styles.MailTopTypeFormItem}>
    <Row gutter={16}>
      <Col span={2}>
        <Form.FormItem name={[formFieldName, 'value']} rules={[{ required: true, message: '请输入顶级类型'}]}>
          <Input label='类型' />
        </Form.FormItem>
      </Col>
      <Col span={9}>
        <Form.FormItem name={[formFieldName, 'rule']} rules={[{ required: true, message: '请输入顶级类型规则'}]}>
          <Input label='规则' />
        </Form.FormItem>
      </Col>
      <Col span={1} className={styles.operation}>
        <RiDeleteBack2Line size={24} onClick={openRemoveFormItemDialog}>删除规则</RiDeleteBack2Line>
      </Col>
    </Row>
  </div>
}

export default MailTopTypeFormItem
